@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './scrollbar.scss';
@import './reset.scss';
@import './intelirri.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 12px;
}

.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 50px;
  line-height: 50px;
}

.leaflet-control-attribution a{
  display:none;
}


.color-primary,.primary{
  color:#1890ff
}
.color-info,.info{
  color:#666
}
.color-success,.success{
  color:#13ce66
}
.color-warning,.warning{
  color:#FFBA00
}
.color-danger,.danger{
  color:#ff4949
}
.color-black{
  color:#000
}

.font14{
  font-size:14px;
}
.font{
  &12{
    font-size:12px;
  }
  &14{
    font-size:14px;
  }
  &18{
    font-size:18px;
  }
  &16 {
    font-size:16px;
  }
  &24{
    font-size:24px;
  }
  &36{
    font-size:36px;
  }
  &48{
    font-size:48px;
  }
  &60{
    font-size:60px;
  }
}

.tip {
  padding: 18px 16px 0 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
}

.labelClass,.contentClass{
  width:120px;
  font-weight:bold !important;
  color:#111 !important;
}
.contentClass{
  width:130px;
}
.contentClassLong{
  width:660px;
}
.flex-container{
  display: flex;
  margin-left:60px;
  dl{
    display: flex;
    flex-direction: row;
    margin-left:0;
    margin-right:12px;
    align-items: center;
    color:#999;
    dt{
      display:inline-block;
      width:10px;
      height:10px;
      border-radius:50%;
      margin-right:4px;
      &.color-primary{
        background:#1890ff;
      }
      &.color-success{
        background:#67c23a;
      }
      &.color-info{
        background:#909399;
      }
      &.color-warning{
        background:#FFBA00;
      }
      &.color-danger{
        background:#f56c6c;
      }
    }
    dd{
      margin-bottom:0
    }
  }
}
.el-collapse-item__content{
  padding-bottom:0;
}

.color-white{
  color:#fff;
}
.color-primary{
  color:#1890ff;
}
.color-success{
  color:#67c23a;
}
.color-info{
  color:#909399;
}
.color-warning{
  color:#FFBA00;
}
.color-danger{
  color:#f56c6c;
}

.intelirri-notification{
  .el-notification__content{
    text-align: left;
    font-size: 14px;
  }
}

.fl{
  float:left;
}
.fr{
  float:right;
}

.mt12{
  margin-top:12px;
}
.mb12{
  margin-bottom:12px;
}
.pb12{
  padding-bottom:12px;
}
.pb18{
  padding-bottom:18px;
}


.map-tools-container{
  background:rgba(255,255,255,.9);
  border-radius:4px;
  padding:0 12px;
  dl{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#666;
    padding:12px 0;
    border-bottom:1px solid #ddd;
    cursor:pointer;
    &:hover,&.active{
      color:#409EFF;
    }
    dt{
      font-size:18px;
    }
  }
}

.trend-container{
  height: calc(100vh - 224px);
}

.el-main-intelirri{
  padding:0
}
.aside-container{
  background:#f9f9f9;
  border:1px solid #f0f0f0;
  margin-right:12px;
}
.el-tabs__item.is-active{
  font-weight:bold;
}

.el-card__body,.bg-white{
  background:#fff;
}

.colors{
  position:absolute;
  top:24px;
  left:64px;
  z-index:999;
  dl{
    align-items:center;
    font-size:12px;
    dt{
      width:150px;
      display:flex;
      height:36px;
      line-height:35px;
      text-align:center;
      margin-right:4px;
      color:#000;
      align-items:center;
      padding:0 12px;
      &:hover{
        opacity: 0.9;
        cursor:pointer;
      }
    }
  }
}